<template>
  <div class="follow">

    <ul class="list">
      <li class="clearFix" v-for="item in follow">
        <div class="fl left" @click="gotoAddress({path:'/otherIndex?id='+item.follow_customer_id})">
          <img class="icon1" :src="'http://api.piver.cn/image/users/'+item.follow_customer_id+'.jpg'">
          <span>{{item.firstname}}</span>
        </div>
        <div class="fr right">
          <!--<mt-button type="default" size="small" v-if="!follownum">+ 关注</mt-button>-->
          <mt-button type="danger" size="small" @click="unfollowPeople(item.follow_customer_id)">√已关注</mt-button>

        </div>
      </li>
      <!--<li class="clearFix">-->
      <!--<div class="fl left">-->
      <!--<img class="icon1" src="https://dummyimage.com/40x40">-->
      <!--<span>陈大大</span>-->
      <!--</div>-->
      <!--<div class="fr right">-->
      <!--<span>+ 关注</span>-->
      <!--</div>-->
      <!--</li>-->

    </ul>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    name: 'Follow',
    data () {
      return {
        follow:[]
      }
    },

    mounted:function(){
      this.initData();
    },
    methods:{
      gotoAddress(path){
        this.$router.push(path)
      },

      initData:function(){
        var _this =this;
        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;


        $.ajax({
          type:'post',
          url: RouteMap.meFollowList,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){
              _this.follow= res.data.list;
//              console.log(_this.fans);
            }
            else{
              //Toast(res.msg)
            }
          }
        });
      },
      unfollowPeople:function(id){

        var  ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.unfollow_customer_id = id;

        var _this=this;
        $.ajax({
          type:'post',
          url: RouteMap.unfollowPeople,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              //Toast(res.msg);
              _this.initData();

//               console.log(res.data)
            }
            else{
              Toast(res.msg)
            }
          }
        })
      }


    }



  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list li{
    background:#fff;
    padding:.3rem .5rem;
    border-bottom:#000 solid 1px;
  }
  .left .icon1{
    border-radius:50%;
    width:2rem;
    height:2rem;
  }
  .left span{
    line-height:2.2rem;
  }
  .right{
    padding:.2rem;
  }
  .right .icon2{

  }

</style>
